<script setup lang="ts">
import { ref } from 'vue'
import { useConversionPrice } from '@/utils/useConversionPrice'
import { Decimal } from 'decimal.js'
import Storage from '@/libs/storage'
import { ElMessage, ElMessageBox } from 'element-plus'
import { doDeleteShopCarData, doUpdateShopCarGood, doEmptyShopCarData, doPostOrderValid } from '@/apis/shopCar'
import { doAddAssess } from '@/apis/consumer'
import { useCardInfo } from '@/store/modules/cart'
import type { GoodListType, StoragePackage } from './types'
import { cloneDeep } from 'lodash-es'
import QIcon from '@/components/q-icon/q-icon.vue'
import { handleParams } from '@/utils/goodsUtils'

const storage = new Storage()

const $router = useRouter()
const validList = ref<GoodListType[]>([])
const inValidList = ref<GoodListType[]>([])
const $cardInfo = useCardInfo()
// 全选标识
const isCheckAllTag = ref(false)
const resultLength = ref(0)
// 最终价格与数量计算
const resultPrice = computed(() => {
  if (validList.value.length) {
    const products = validList.value.map((item) => [...item.products]).flat(1)
    const priceArr = products.map((item) => {
      if (item.isChecked) {
        return new Decimal(item.finalPrice).mul(item.num)
      } else {
        return 0
      }
    })
    // eslint-disable-next-line vue/no-side-effects-in-computed-properties
    resultLength.value = priceArr.filter(Boolean).length
    return priceArr.reduce((pre, cur) => {
      return new Decimal(pre).add(new Decimal(cur))
    })
  } else {
    return 0
  }
})

initList()

async function initList() {
  await $cardInfo.INIT_CARD()
  validList.value = $cardInfo.validList
  inValidList.value = $cardInfo.inValidList
}
/**
 * @description: 商品数量变化
 */
const countChange = async (shopId: string, goodId: string, oldSkuId: string, num: number) => {
  const { code, success, data } = await doUpdateShopCarGood(oldSkuId, {
    productId: goodId,
    skuId: oldSkuId,
    num,
    shopId,
  })
}

/**
 * @description: 单选回调
 * @param {string} shopId
 */
const goodCheckHandle = (shopId: string) => {
  const currentArr = validList.value.filter((item) => item.shopId === shopId)
  const products = currentArr[0].products
  nextTick(() => {
    if (products.every((item) => item.isChecked)) {
      currentArr[0].isAllChecked = true
    } else {
      currentArr[0].isAllChecked = false
    }
  })
  isCheckAllHandle()
}
/**
 * @description: 全选
 * @returns {*}
 */
const handleCheckAll = () => {
  validList.value = validList.value.map((item) => {
    item.isAllChecked = isCheckAllTag.value
    item.products = item.products.map((ite) => {
      ite.isChecked = isCheckAllTag.value
      return ite
    })
    return item
  })
}
/**
 * @description: 店铺全选回调
 * @param {string} shopId
 */
const goodCheckAllHandle = (shopId: string) => {
  const currentArr = validList.value.filter((item) => item.shopId === shopId)
  const allStatus = currentArr[0].isAllChecked
  currentArr[0].products = currentArr[0].products.map((item) => {
    item.isChecked = allStatus
    return item
  })
  isCheckAllHandle()
}

/**
 * @description: 全选判断
 */
function isCheckAllHandle() {
  nextTick(() => {
    const unCheckArr = validList.value.filter((item) => {
      return item.isAllChecked
    })
    if (unCheckArr.length === validList.value.length) {
      isCheckAllTag.value = true
    } else {
      isCheckAllTag.value = false
    }
  })
}
/**
 * @description: 批量或单个删除购物车
 */
const handleDelete = (shopId?: string, skuId?: string, uniqueIds?: any) => {
  const list = validList.value
  // debugger
  const submitArr =
    shopId && skuId && uniqueIds
      ? [
          {
            shopId,
            skuIds: [skuId],
            uniqueIds: [uniqueIds],
          },
        ]
      : assemblyData(list)
  if (!submitArr.length) {
    ElMessage.error('请选择商品')
  } else {
    ElMessageBox.confirm(!shopId && !skuId ? '确认要删除所有选中的商品吗？' : '确认要删除该商品吗?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      const { code, success } = await doDeleteShopCarData(submitArr)
      if (code === 200 && success) {
        ElMessage.success('删除成功')
        $cardInfo.INIT_CARD().then(() => {
          initList()
        })
      }
    })
  }
}
/**
 * @description: 整理提交可用或不可用数据
 * @param {GoodListType[]} list
 */
function assemblyData(list: GoodListType[]) {
  const tempArr = []
  for (let i = 0; i < list.length; i++) {
    const tempObj = {
      shopId: '',
      skuIds: [] as string[],
      uniqueIds: [] as string[],
    }
    if (list[i].products.length > 0) {
      tempObj.shopId = list[i].shopId
      for (let j = 0; j < list[i].products.length; j++) {
        // 对应可用商品判断是否checked 对应不可用商品检测enable
        if (list[i].products[j].isChecked || !list[i].enable) {
          tempObj.skuIds.push(list[i].products[j].id)
          tempObj.uniqueIds.push(list[i].products[j]?.uniqueId)
        }
      }
      if (tempObj.skuIds.length > 0) {
        tempArr.push(tempObj)
      }
    }
  }
  return tempArr
}
/**
 * @description: 移入收藏
 * @returns {*}
 */
const handleMovedFavorites = (shopId: string, item: any) => {
  const { productId, image: productPic, productName, finalPrice: productPrice, uniqueId, id } = item

  const submitAssessArrs = {
    userCollectDTOList: [{ shopId, productId, productPic, productName, productPrice }],
    whetherCollect: true,
  }
  ElMessageBox.confirm('确定移入到收藏夹吗', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const { code, msg } = await doAddAssess(submitAssessArrs)
    if (code !== 200) return ElMessage.error('移入收藏失败')
    const { code: DCode, success } = await doDeleteShopCarData([{ shopId, skuIds: [id], uniqueIds: [uniqueId] }])
    if (DCode === 200 && success) ElMessage.success('收藏成功')
    initList()
  })
}
/**
 * @description: 清空购物车失效商品
 */
const hanleEmpty = () => {
  ElMessageBox.confirm('确定清空失效商品吗？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    const { code, success } = await doEmptyShopCarData()
    if (code === 200 && success) {
      ElMessage.success('清空成功')
      $cardInfo.INIT_CARD().then(() => {
        initList()
      })
    }
  })
}
const deliveryOptionsList = reactive({
  EXPRESS: [],
  INTRA_CITY_DISTRIBUTION: [],
  SHOP_STORE: [],
  VIRTUAL: [],
})
let deliveryType = {
  EXPRESS: '快递配送',
  INTRA_CITY_DISTRIBUTION: '同城配送',
  SHOP_STORE: '到店自提',
  VIRTUAL: '无需配送',
  // WITHOUT: '无需配送',
}
function formatCartGoodsStorePoint(params: StoragePackage[], key: any) {
  const currentGoodsGroups = cloneDeep(params).map((shop: any) => {
    shop.products = shop.products.filter((item: any) => item.distributionMode.includes(key))
    shop.distributionMode = key
    return shop
  })
  return currentGoodsGroups.filter((item: any) => item.distributionMode === key).filter((item) => item.products.length > 0)
}

type TypeMode = keyof typeof deliveryOptionsList

// 超出限购次数处理
async function restrictedPurchase(types: boolean, typeMode: TypeMode) {
  const orderValid: any = {
    orderType: 'COMMON',
    activityId: '',
    products: [],
    distributionMode: typeMode || 'EXPRESS',
  }
  const list = !types ? deliveryOptionsList.EXPRESS : deliveryOptionsList[typeMode]
  typeMode !== 'EXPRESS'
    ? list.forEach((item) => {
        item.products.forEach((ite: any) => {
          const { skuId, id: productId, num } = ite
          const shopProduct = { key: { shopId: item.shopId, productId, skuId }, num }
          orderValid.products.push(shopProduct)
        })
      })
    : list.forEach((item) => {
        const { skuId, id: productId, num } = item
        const shopProduct = { key: { shopId: item.shopId, productId, skuId }, num }
        orderValid.products.push(shopProduct)
      })
  const { code } = await doPostOrderValid(orderValid)
  return code
}

const handleSettlement = async (types: boolean, typeMode: TypeMode, index?: number, sameCity?: string) => {
  if (sameCity === '同城配送') return
  if ($cardInfo.count <= 0) return
  let routerPush = true
  if (!resultLength.value) {
    ElMessage.error('请选择商品')
  } else {
    // @ts-ignore
    if (!types) {
      Object.keys(deliveryOptionsList).forEach((item: string) => {
        deliveryOptionsList[item as TypeMode] = []
      })
      for (let i = 0; i < sortData(validList.value).length; i++) {
        if (types) break
        let item = sortData(validList.value)[i]
        for (let j = 0; j < item.products.length; j++) {
          let ite: any = item.products[j]
          if (ite.distributionMode.indexOf('EXPRESS') !== -1) deliveryOptionsList.EXPRESS.push({ ...ite, shopId: item.shopId })
          routerPush = false
        }
      }
      deliveryOptionsList.INTRA_CITY_DISTRIBUTION = formatCartGoodsStorePoint(sortData(validList.value), 'INTRA_CITY_DISTRIBUTION')
      deliveryOptionsList.SHOP_STORE = formatCartGoodsStorePoint(sortData(validList.value), 'SHOP_STORE')
      deliveryOptionsList.VIRTUAL = formatCartGoodsStorePoint(sortData(validList.value), 'VIRTUAL')

      /**
       * @: 判断是否只有一种配送方式
       */
      let isOnlyDelivery = false
      let key: keyof typeof deliveryOptionsList
      for (key in deliveryOptionsList) {
        const item = deliveryOptionsList[key]

        if (item.length && isOnlyDelivery) {
          return (deliveryOptionsDialog.value = true)
        }
        if (item.length) {
          typeMode = key
          isOnlyDelivery = true
          types = true
        }
      }
    }

    if (types) {
      routerPush = true
      let validLists = formatCartGoodsStorePoint(sortData(validList.value, typeMode), typeMode)
      if (typeMode !== 'EXPRESS' && index! > -1) {
        let validListVal = []
        validListVal.push(validLists[index])
        storage.setItem('commodityInfo', validListVal, 60 * 60 * 2)
      } else storage.setItem('commodityInfo', validLists, 60 * 60 * 2)
    }
    if (!routerPush) return
    if ((await restrictedPurchase(types, typeMode)) === 30039) {
      ElMessage.error('商品库存不足或商品超限购')
      setTimeout(() => {
        $router.go(0)
      }, 700)
      return
    }
    $router.push({
      path: '/settlement',
      query: { source: 'CART' },
    })
  }
}
/**
 * @description: 整合商品数据存储缓存供提交订单使用
 * @returns {*}
 */
const sortData = (
  data: GoodListType[],
  typeMode?: 'EXPRESS' | 'INTRA_CITY_DISTRIBUTION' | 'SHOP_STORE' | 'VIRTUAL' | 'WITHOUT',
): StoragePackage[] => {
  const tempArr = []
  for (let i = 0; i < data.length; i++) {
    const { shopId, shopLogo, shopName } = data[i]
    let outObject: StoragePackage = {
      distributionMode: typeMode,
      shopId,
      shopName,
      shopLogo,
      products: [],
    }
    for (let j = 0, innerProducts = data[i].products; j < innerProducts.length; j++) {
      if (innerProducts[j].isChecked) {
        const { id, image, num, price, salePrice, finalPrice, productId, productName, specs, freightTemplateId, distributionMode } = innerProducts[j]
        let productFeaturesValue: any = {}
        innerProducts[j]?.productAttributes?.forEach(
          (item: { id: string | number; featureValues: { featureValueId: string }[] }) =>
            (productFeaturesValue[item.id] = item.featureValues.map((ite: { featureValueId: string }) => ite.featureValueId)) || [],
        )
        outObject.products.push({
          // @ts-ignore
          distributionMode,
          id: productId,
          image,
          price,
          num,
          salePrice: +finalPrice,
          productId,
          skuId: id,
          productName,
          specs,
          freightTemplateId,
          weight: '' || 0,
          productFeaturesValue,
        })
      }
    }
    outObject.products.length && tempArr.push(outObject)
  }
  return tempArr
}
const gotoDetail = (productId: string, shopId: string) => {
  $router.push({
    path: '/detail',
    query: { productId, shopId },
  })
}
const getlimitNum = (limitType: string, limitNum: number) => {
  if (limitType !== 'UNLIMITED') {
    return limitNum
  } else {
    return 99999
  }
}

// 选择配送方式商品弹窗
const deliveryOptionsDialog = ref(false)
// 关闭
const handleClose = () => {
  deliveryOptionsDialog.value = false
}
watch(
  () => deliveryOptionsDialog.value,
  () => {
    // @ts-ignore
    if (!deliveryOptionsDialog.value) Object.keys(deliveryOptionsList).forEach((item) => (deliveryOptionsList[item] = []))
  },
)
const scrollVal = ref(false)
const scrollFn = () => (scrollVal.value = true)
</script>

<template>
  <div class="shopCarBox">
    <div class="shopCarBox__title">
      购物车 （<span v-if="$cardInfo.count > 0">
        <span>{{ $cardInfo.count }}</span></span
      >）
    </div>
    <div class="shopCarBox__header">
      <el-checkbox v-model="isCheckAllTag" label="全选" size="large" @change="handleCheckAll" />
      <div style="margin-left: 56px">商品</div>
      <div style="margin-left: 454px">单价（元）</div>
      <div style="margin-left: 70px">数量</div>
      <div style="margin-left: 112px">金额（元）</div>
      <div style="margin-left: 70px">操作</div>
    </div>

    <div v-if="validList.length <= 0 && inValidList.length <= 0" class="OutOfStock">
      <img src="@/assets/images/icon/carNo.png" />
      <span>暂无商品~</span>
    </div>
    <div v-else>
      <div style="margin-bottom: 72px">
        <div v-for="item in validList" :key="item.shopId">
          <!-- 店铺 -->
          <div class="shopCarBox__shopBox">
            <el-checkbox v-model="item.isAllChecked" :disabled="!item.enable" size="large" @change="goodCheckAllHandle(item.shopId)" />
            <span><QIcon name="icon-dianpu5" size="18px" color="#F54319" /></span>
            <div>{{ item.shopName }}</div>
            <!-- 客服 -->
            <!-- <p><QIcon name="icon-lianxikefu" size="14px" color="#F54319"></QIcon></p> -->
          </div>
          <!-- 商品 -->
          <div class="shopCarBox__goodBoxs">
            <div v-for="ite in item.products" :key="ite.productId" class="shopCarBox__goodBox">
              <!-- :class="ite.isChecked ? 'c-bg-FFFBF0' : ''" -->
              <div class="shopCarBox__goodBox--checkedBox">
                <el-checkbox
                  v-model="ite.isChecked"
                  class="shopCarBox__goodBox--checked"
                  :disabled="!item.enable"
                  size="large"
                  @change="goodCheckHandle(item.shopId)"
                />
                <div class="shopCarBox__goodBox--imgBox">
                  <img :src="ite.image" @click="gotoDetail(ite.productId, item.shopId)" />
                </div>
              </div>
              <div class="shopCarFrist">
                <div class="shopCarFrist__specification" @click="gotoDetail(ite.productId, item.shopId)">
                  <div>
                    {{ ite.productName }}
                  </div>
                  <span> {{ [...ite.specs, ...handleParams(ite.productAttributes)].join('，') }} </span>
                </div>
                <div class="shopCarFrist__price">￥{{ useConversionPrice(ite.finalPrice).toFixed(2) }}</div>
                <div class="shopCarFrist__number">
                  <el-input-number
                    v-model="ite.num"
                    :min="1"
                    :max="getlimitNum(ite.skuStock.limitType, ite.skuStock.limitNum)"
                    size="small"
                    @change="countChange(item.shopId, ite.productId, ite.id, ite.num)"
                  />
                  <div v-if="ite.skuStock.limitType !== 'UNLIMITED'" class="shopCarFrist__number--limitNum">限购 {{ ite.skuStock.limitNum }} 件</div>
                </div>
                <div class="shopCarFrist__price shopCarFrist__totalPrice">
                  ￥{{ (Number(useConversionPrice(ite.finalPrice)) * ite.num).toFixed(2) }}
                </div>
                <div class="shopCarFrist__operate">
                  <div @click="handleDelete(item.shopId, ite.id, ite?.uniqueId)">删除</div>
                  <div @click="handleMovedFavorites(item.shopId, ite)">移入收藏</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-for="item in inValidList" :key="item.shopId">
          <!-- 店铺 -->
          <div class="shopCarBox__shopBox" style="margin-top: 8px">
            <div>无效商品</div>
            <div class="shopCarBox__shopBox--del" @click="hanleEmpty">清除无效商品</div>
          </div>
          <!-- 商品 -->
          <div class="shopCarBox__goodBoxs">
            <div v-for="ite in item.products" :key="ite.productId" class="shopCarBox__goodBox">
              <!-- :class="ite.isChecked ? 'c-bg-FFFBF0' : ''" -->
              <div class="shopCarBox__goodBox--checkedBox shopCarBox__goodBox--loseEfficacyImgBox">
                <div class="shopCarBox__goodBox--imgBox">
                  <img :src="ite.image" />
                </div>
                <span class="shopCarBox__goodBox--imgBox"><img src="@/assets/images/Delisted.png" style="opacity: 0.6" /></span>
              </div>
              <div class="shopCarFrist">
                <div class="shopCarFrist__specification shopCarFrist__loseEfficacy">
                  <div>
                    {{ ite.productName }}
                  </div>
                  <span>已下架</span>
                </div>
                <div class="shopCarFrist__price" />
                <div class="shopCarFrist__number" />
                <div class="shopCarFrist__price shopCarFrist__totalPrice" />
                <div class="shopCarFrist__operate" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-affix :position="!scrollVal ? 'top' : 'bottom'" @scroll="scrollFn">
      <div class="affix">
        <!-- 左 -->
        <div class="affix__left">
          <el-checkbox v-model="isCheckAllTag" class="affix__left--checkbox" label="全选" size="large" @change="handleCheckAll" />
          <div @click="handleDelete()">删除选中商品</div>
        </div>
        <!-- 右 -->
        <div class="affix__right">
          <div class="affix__right--resultLength">
            已选 <span> {{ resultLength }} </span> 件
          </div>
          <div class="affix__right--resultPrice">
            总价(不含运费)：
            <span>￥{{ useConversionPrice(resultPrice).toFixed(2) }}</span>
          </div>
          <div
            :class="$cardInfo.count > 0 ? 'affix__right--settlement' : 'affix__right--settlement affix__right--settlementNull'"
            @click="handleSettlement(false)"
          >
            去结算
          </div>
        </div>
      </div>
    </el-affix>

    <el-dialog v-model="deliveryOptionsDialog" title="配送方式选择" :width="540" top="5%" :before-close="handleClose" style="position: relative">
      <p class="copyWriter">不同配送方式的商品暂不支持同时结算</p>
      <div class="shopInfoBox">
        <div v-for="(item, index) in deliveryOptionsList" :key="index" class="shopInfo">
          <div v-if="index === 'EXPRESS'">
            <div v-if="item.length > 0" class="shopInfo__box">
              <div class="shopInfo__title">
                <div>{{ deliveryType[index] }}</div>
                <p>
                  共 <span>{{ item.length }}</span> 件
                </p>
              </div>
              <div class="shopInfo__title shopInfo__info">
                <div class="shopInfo__info--imgList">
                  <div v-for="(i, j) in item" :key="j" class="shopInfo__info--img">
                    <img :src="i.image" alt="" />
                    <span v-if="i.num > 0" class="shopInfo__info--num">
                      <span>x{{ i.num }}</span>
                    </span>
                  </div>
                </div>
                <el-button class="shopInfo__info--button" @click="handleSettlement(true, index)">去结算</el-button>
              </div>
            </div>
          </div>
          <div v-else>
            <div v-if="item.length > 0" class="shopInfo__box">
              <div class="shopInfo__title" style="margin-bottom: 12px">
                <div>{{ deliveryType[index] }}</div>
              </div>
              <div v-for="(shop, shopIndex) in item" :key="shop">
                <div class="shopInfo__title--storeName">
                  <!-- 店铺名 -->
                  <div>
                    <span><QIcon name="icon-dianpu5" size="12px" color="#F54319" /></span>
                    <div>{{ shop?.shopName }}</div>
                  </div>
                  <p>
                    共 <span>{{ shop?.products.length }}</span> 件
                  </p>
                </div>
                <div class="shopInfo__title shopInfo__info">
                  <div class="shopInfo__info--imgList">
                    <div v-for="(i, j) in shop?.products" :key="j" class="shopInfo__info--img">
                      <img :src="i.image" alt="" />
                      <span v-if="i.num > 0" class="shopInfo__info--num">
                        <span>x{{ i.num }}</span>
                      </span>
                    </div>
                  </div>
                  <div
                    class="shopInfo__info--button"
                    :class="{ 'shopInfo__info--disabled': deliveryType[index] === '同城配送' }"
                    @click="handleSettlement(true, index, shopIndex, deliveryType[index])"
                  >
                    去结算
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
@include b(shopInfoBox) {
  max-height: 720px;
  overflow: auto;
}
@include b(shopInfo) {
  border-radius: 4px;
  background-color: #f5f5f5;
  @include e(box) {
    padding: 12px 16px 0px 16px;
    margin-top: 16px;
    :first-of-type {
      margin-top: 0;
    }
  }
  @include e(title) {
    display: flex;
    justify-content: space-between;
    color: #333;
    p {
      font-size: 12px;
      color: #999;
      span {
        color: #ff0000;
      }
    }
    @include m(storeName) {
      display: flex;
      justify-content: space-between;
      color: #333;
      font-size: 12px;
      padding-left: 2px;
      div {
        display: flex;
        div {
          line-height: 18px;
        }
        span {
          display: inline-block;
          padding-top: 2px;
          margin-right: 10px;
        }
      }
      p {
        font-size: 12px;
        color: #999;
        span {
          color: #ff0000;
        }
      }
    }
  }
  @include e(info) {
    margin-top: 12px;
    align-items: center;
    @include m(imgList) {
      display: flex;
      justify-content: start;
      width: 408px;
      height: 93px;
      margin-bottom: 16px;
      overflow-x: auto;
    }
    @include m(num) {
      position: absolute;
      bottom: -3px;
      right: 0px;
      span {
        width: 18px;
        position: absolute;
        bottom: 6px;
        right: 0px;
      }
    }
    @include m(img) {
      flex-shrink: 0;
      width: 90px;
      height: 90px;
      margin-right: 12px;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      img {
        width: 90px;
        height: 90px;
      }
    }
    @include m(button) {
      flex-shrink: 0;
      width: 64px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      border-radius: 2px;
      background: #f54319;
      font-size: 12px;
      color: #fff;
      cursor: pointer;
    }
    @include m(disabled) {
      background: #ccc;
      cursor: not-allowed;
    }
  }
}
@include b(shopCarBox) {
  width: 1200px;
  text-align: left;
  background-color: #fff;
  margin: 16px auto 24px;
  padding: 24px 24px 0 24px;
  @include e(title) {
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    color: #333;
    span {
      color: #ff0000;
      span {
        display: inline-block;
        transform: translateY(1px);
      }
    }
  }
  @include e(header) {
    display: flex;
    height: 42px;
    font-size: 14px;
    line-height: 42px;
    color: #666;
    background-color: #f5f5f5;
    padding: 0 96px 0 16px;
    font-weight: bold;
    margin-top: 16px;
  }
  @include e(shopBox) {
    display: flex;
    align-items: center;
    height: 56px;
    line-height: 56px;
    padding-left: 16px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    span {
      margin: 0 11px 0 19px;
    }
    p {
      margin-left: 8px;
      cursor: pointer;
    }
    @include m(del) {
      position: absolute;
      right: 0;
      cursor: pointer;
      font-size: 12px;
      color: #999;
    }
  }
  @include e(goodBoxs) {
    border-top: 2px solid rgb(153, 153, 153);
  }
  @include e(goodBox) {
    display: flex;
    padding: 16px 0 24px 15px;
    border: 1px solid rgba(153, 153, 153, 0.4);
    border-top: 0px;
    @include m(checkedBox) {
      display: flex;
    }
    @include m(checked) {
      transform: translateY(-10px);
      // margin-right: 16px;
    }
    @include m(imgBox) {
      width: 100px;
      height: 100px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      flex-shrink: 0;
      margin-left: 16px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    @include m(loseEfficacyImgBox) {
      position: relative;
      margin-left: 8px;
      display: flex;
      span {
        width: 100px;
        height: 100px;
        display: block;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    @include b(shopCarFrist) {
      display: flex;
      color: #333;
      @include e(specification) {
        width: 420px;
        padding-left: 8px;
        cursor: pointer;
        div {
          font-size: 14px;
          line-height: 25px;
          height: 50px;
          color: #333;
          overflow: hidden;
          margin-bottom: 30px;
        }
        span {
          display: inline-block;
          overflow: hidden;
          height: 20px;
          color: #999;
          font-size: 14px;
          line-height: 20px;
        }
      }
      @include e(loseEfficacy) {
        cursor: auto;
        div {
          color: #999;
        }
        span {
          color: #333;
        }
      }
      @include e(price) {
        width: 97px;
        text-align: center;
        font-size: 14px;
        margin-left: 12px;
      }
      @include e(number) {
        margin-left: 37px;
        @include m(limitNum) {
          text-align: center;
          font-size: 12px;
          color: #ff0000;
          margin-top: 4px;
        }
      }
      @include e(totalPrice) {
        margin-left: 58px;
      }
      @include e(operate) {
        margin-left: 63px;
        font-size: 14px;
        line-height: 20px;
        div {
          cursor: pointer;
          margin-bottom: 24px;
        }
        :first-child {
          color: red;
        }
        :last-child {
          color: #48b6ff;
        }
      }
    }
  }
}
@include b(affix) {
  height: 48px;
  width: 100%;
  line-height: 48px;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.08);
  @include e(left) {
    display: flex;
    font-size: 14px;
    padding-left: 16px;
    color: #999;
    div {
      cursor: pointer;
      margin-left: 40px;
    }
    @include m(checkbox) {
      height: 48px;
      line-height: 48px;
    }
  }
  @include e(right) {
    display: flex;
    font-size: 14px;
    color: #333;
    @include m(resultLength) {
      margin-right: 24px;
      span {
        font-weight: bold;
        color: #ff0000;
      }
    }
    @include m(resultPrice) {
      font-size: 12px;
      color: #999;
      margin-right: 37px;
      span {
        font-size: 16px;
        font-weight: bold;
        color: #ff0000;
      }
    }
    @include m(settlement) {
      width: 96px;
      height: 48px;
      font-size: 20px;
      font-weight: 500;
      text-align: center;
      color: #fff;
      background-color: #ff0000;
      cursor: pointer;
    }
    @include m(settlementNull) {
      background-color: #999;
      cursor: default;
    }
  }
}
@include b(copyWriter) {
  position: absolute;
  top: 25px;
  left: 144px;
  color: #999;
  font-size: 12px;
  zoom: 0.9;
}
@include b(OutOfStock) {
  position: relative;
  display: flex;
  justify-content: center;
  img {
    margin-top: 94px;
    width: 488px;
    height: 488px;
  }
  span {
    position: absolute;
    top: 410px;
  }
}
:deep().el-dialog__body {
  padding: 0 16px 16px 16px;
}
:deep().el-checkbox__label {
  color: #666 !important;
  font-weight: bold;
  margin-left: 2px;
}
:deep().el-input-number--small {
  width: 90px;
  border: 1px solid rgba(153, 153, 153, 0.5);
  overflow: hidden;
}
:deep().el-input-number--small .el-input-number__decrease,
.el-input-number--small .el-input-number__increase {
  height: 24px;
  height: 24px;
  border-radius: 0;
  background-color: #f5f5f5;
  transform: translate(-1px, -1px);
}
:deep().el-input-number__increase {
  height: 24px;
  border-radius: 0;
  background-color: #f5f5f5;
  transform: translate(1px, -1px);
}
:deep().el-checkbox__input.is-checked .el-checkbox__inner {
  width: 14px;
  height: 14px;
  background-color: #0066ff !important;
  border: 1px solid #0066ff !important;
}
:deep().el-checkbox__inner:hover {
  border-color: #0066ff !important;
}
:deep().el-checkbox__input.is-checked + .el-checkbox__label {
  color: #0066ff !important;
}
:deep().el-dialog__header {
  padding: 16px;
  margin: 0;
  border-bottom: 1px solid rgb(222, 222, 222);
  span {
    font-size: 16px;
  }
}
:deep().el-dialog__headerbtn .el-dialog__close {
  font-size: 22px;
}
</style>
